<template>
    <div class="user-container">
        <div class="user-info">
            <div v-if="user" class="base-info">
                <van-cell-group class="info1">
                    <van-cell
                        center
                    >
                        <van-image
                            slot="icon"
                            fit="cover"
                            round
                            :src="userInfo.photo"
                        />
                        <div slot="title" class="user-name"><span>{{ userInfo.name }}</span></div>
                        <van-button
                            size="small"
                            round
                            :to="{ path: '/user/edit', query: { id: userInfo.id }}"
                        >编辑资料
                        </van-button>
                    </van-cell>
                </van-cell-group>
                <van-grid
                    class="info2"
                    :border="false"
                >
                    <van-grid-item>
                        <div class="item-box" slot="text">
                            <span>{{ userInfo.art_count }}</span>
                            <p>头条</p>
                        </div>
                    </van-grid-item>
                    <van-grid-item>
                        <div class="item-box" slot="text">
                            <span>{{ userInfo.follow_count }}</span>
                            <p>关注</p>
                        </div>
                    </van-grid-item>
                    <van-grid-item>
                        <div class="item-box" slot="text">
                            <span>{{ userInfo.fans_count }}</span>
                            <p>粉丝</p>
                        </div>
                    </van-grid-item>
                    <van-grid-item>
                        <div class="item-box" slot="text">
                            <span>{{ userInfo.like_count }}</span>
                            <p>获赞</p>
                        </div>
                    </van-grid-item>
                </van-grid>
            </div>
            <div v-else class="not-login">
                <div class="not-login-img">
                    <img src="./../../assets/img/phone.png" @click="$router.push('/login?redicter=/user')" />
                </div>
                <div class="text"><span @click="$router.push('/login?redicter=/user')">登入 / 注册</span></div>
            </div>
            <div class="data-info">
                <van-grid :column-num="2">
                    <van-grid-item icon-prefix="iconfont icon" icon="shoucang" text="收藏" />
                    <van-grid-item icon-prefix="iconfont icon" icon="lishi" text="历史" />
                </van-grid>
                <van-cell class="info-notice" title="消息通知" is-link to="" />
                <van-cell v-if="user" class="logout" title="退出登入" @click="onLogout"/>
            </div>
        </div>
        <van-overlay :show="isShowOverlay">
            <van-loading
                type="spinner"
                size="54"
                color="#1989fa"
            />
        </van-overlay>
    </div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
import * as Api from 'api/common';
// import removeItem from '@/utils/storage';

export default {
    name: 'userIndex',
    computed: {
        ...mapState(['user'])
    },
    data () {
        return {
            userInfo: {},
            isShowOverlay: false
        };
    },
    methods: {
        ...mapActions(['updateUser', 'emptyCache', 'defaultCache']),
        // 退出登入弹窗
        onLogout () {
            this.$dialog.confirm({
                title: '退出提示',
                message: '确认退出吗？'
            })
                .then(() => {
                    // on confirm
                    this.updateUser(null);
                    this.emptyCache();
                    this.$nextTick(() => {
                        this.defaultCache();
                    });
                // this.$router.push({
                //     name: 'login',
                //     query: {
                //         redicter: '/user'
                //     }
                // });
                })
                .catch(() => {
                    // on cancel
                });
        },
        async getCurrentUser () {
            this.isShowOverlay = true;
            if (this.user) {
                const res = await Api.reqDev('/v1_0/user');
                if (res.message === 'OK') {
                    this.userInfo = res.data;
                }
            }
            this.isShowOverlay = false;
        }
    },
    created () {
        /**
            1, 用户进入个人页面进行身份认证
            2，若未登入则不进行接口请求，展示未登入的页面
            3，若用户已登入过但是 token 过期了，展示未登入的页面并提示用户登入过期
          */
        this.getCurrentUser();
    }
};
</script>
<style lang="less" scoped>
.user-container {
    .base-info {
        padding-top: 57px;
        padding-bottom: 0;
        background: url('../../assets/img/my_img.png') no-repeat;
        background-size: cover;
        .van-image {
            width: 67px;
            height: 67px;
        }
        .user-name {
            margin-left: 13px;
        }
        .info1 {
            background-color: transparent;
            .van-cell {
                background-color: transparent;
            }
            &::after {
                border: none;
            }
        }
        .info2 {
            /deep/ .van-grid-item__content {
                background-color: transparent;
                .item-box {
                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    p, span {
                        font-size: 14px;
                        color: #fff;
                    }
                }
            }
        }
    }
    .not-login {
        height: 180px;
        // padding: 20px 0;
        background-color: rgb(144, 144, 250);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .not-login-img {
            img {
                width: 66px;
                height: 66px;
                border-radius: 50%;
            }
        }
        .text {
            color: #fff;
            font-size: 14px;
        }
    }
    .data-info {
        .van-grid-item {
            /deep/ .van-grid-item__content {
                .icon{
                    color: red;
                    font-size: 24px;
                }
                span {
                    font-size: 15px;
                }
            }
        }
        .info-notice {
            // margin: 10px 0;
        }
        .logout {
            font-size: 18px;
            color: red;
        }
    }
    .van-overlay {
        z-index: 100;
        display: flex;
        align-content: center;
        justify-content: center;
        background-color: #fffffff0;
        .van-loading {
            display: flex;
            align-items: center;
        }
    }
}
.logout .van-cell__title{
    text-align: center;
}
</style>
